<template>
  <div class="gl_contentBox gl_heightFull">
    <el-row :gutter="20" class="gl_my_15">
      <!-- 添加客户按钮 -->
      <el-col :md="6" :lg="4">
        <el-button type="primary" size="mini" @click="editOfAdd('add')">添加商品</el-button>
        <el-button type="info" plain size="mini" @click="lookLogChange"><i class="el-icon-date" style="margin-right:2px" />库存变更日志</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="showTableData"
      style="width: 100%"
      stripe
      size="mini"
    >
      <el-table-column
        prop="commodityImg"
        label="商品图片"
      >
        <template slot-scope="scope">
          <el-avatar shape="square" :size="50" :src="scope.row.commodityImg" />
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="commodityName"
        label="商品名称"
      />
      <el-table-column
        prop="clubName"
        label="分馆"
      />
      <el-table-column
        prop="description"
        label="描述"
      />
      <el-table-column
        prop="addTime"
        label="添加时间"
      />
      <el-table-column
        prop="stock"
        label="库存"
      />
      <el-table-column
        prop="operating"
        label="操作"
      >
        <template slot-scope="{row,$index}">
          <el-button type="text" size="mini" @click="editOfAdd(row,$index)">{{ $t('button.edit') }}</el-button>
          <el-button type="text" size="mini" @click="delect($index)">{{ $t('button.delete') }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row class="gl_pt_20" style="text-align: center;">
      <el-pagination layout="total,sizes,prev,pager,next,jumper" :total="tableData.length" :page-size="10" :current-page="1" @current-change="handleCurrentChange()" />
    </el-row>
    <StudentCardForm ref="studentCardForm" @pushTabelData="getTabelDate" />
    <logChange ref="logChange" />
  </div>
</template>

<script>
import { translateByCode } from '@/lib/getTransData';
import StudentCardForm from './materiaForm';
import logChange from './logChange';

export default {
  name: 'StudentCard',
  components: {
    StudentCardForm,
    logChange
  },
  data() {
    return {
      students: {
        name: ''
      },
      logTypeValue: '',
      tableData: [{
        commodityImg: '',
        commodityName: 'SCB',
        clubName: '元动未来',
        description: 'SCB',
        stock: '89',
        addTime: '2020-08-27 12:23:04'
      }, {
        commodityImg: '',
        commodityName: 'SCB',
        clubName: '元动未来',
        description: 'SCB',
        stock: '09',
        addTime: '2020-08-27 12:23:04'
      }, {
        commodityImg: '月卡',
        commodityName: '胡若欣',
        description: '50',
        stock: '80',
        addTime: '50'
      }],
      showTableData: [],
      logType: [ // 日志类型
        {
          value: 'all',
          label: '全部'
        },
        {
          value: 'loginLog',
          label: '登录日志'
        },
        {
          value: 'handleLog',
          label: '操作日志'
        }
      ]
    };
  },
  created () {
    // 获取数据
    // this.tableData = 你获取的数据
    // this.showTableData = JSON.parse(JSON.stringify(你获取的数据))
    this.showTableData = JSON.parse(JSON.stringify(this.tableData));
  },
  methods: {
    editOfAdd(row, index) {
      this.$refs.studentCardForm.open(row);
    },
    // 日志变更
    lookLogChange() {
      this.$refs.logChange.open();
    },
    // 查询
    query() {
      let logTypeValue = this.logTypeValue;
      if (logTypeValue === '全部') {
        logTypeValue = '';
      }
      console.log(logTypeValue);
      this.showTableData = this.tableData.filter(item => item.cardName.includes(logTypeValue));
    },
    // 添加新信息
    getTabelDate(data) {
      this.showTableData.push(data);
      this.$refs.studentCardForm.close();
    },
    // 删除
    delect(index) {
      console.log(index);
      this.$confirm('你确定要删除这条信息?', '提示', {
        confirmButtonText: translateByCode('alert.confirm'),
        cancelButtonText: translateByCode('alert.cancel'),
        type: 'warning'
      }).then(() => {
        // TODO
        this.showTableData.splice(index, 1);
      });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.clickFind(val);
    }
  }
};
</script>

